<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>tabs</title>
  <style>
    .container{
      width:400px;

    }
    .container ul{
      list-style: none;
      width:100%;
      padding-bottom:50px;
    }
    ul>li{
      float:left;
      width:25%;
      line-height:30px;
      height: 30px;
      box-sizing: border-box;
      border:1px solid #666;
      text-align:center;
      background:#a3dbff;
    }
    ul>li.active{
      cursor: pointer;
      background:#2e6da4;
    }
    ul>li>a{
      text-decoration: none;
      color:#333;
      display: inline-block;
      width: 100%;
    }
    .container>div{
      padding-left:50px;
      display:none;
    }
    .container .show{
      display:block;
    }
  </style>
</head>
<body>
<div class="container">
  <ul>
    <li class="active"><a href="#MR_tang">唐僧</a></li>
    <li><a href="#MR_sun">孙悟空</a></li>
    <li><a href="#MR_zhu">猪八戒</a></li>
    <li><a href="#MR_sha">沙僧</a></li>
  </ul>
  <div id="MR_tang" class="show">
    我是师傅
  </div>
  <div id="MR_sun">
    我是大师兄
  </div>
  <div id="MR_zhu">
    我是二师兄
  </div>
  <div id="MR_sha">
    我是沙师弟
  </div>
</div>
<script src="js/jquery-3.1.1.js"></script>
<script>
//  设置鼠标单击事件
  $(".container").click(function(e){
    var target= e.target;
    //获取当前点击元素的href属性
    var elem=$(target).attr("href");
    //判断当前点击的元素是否是A
    if(target.nodeName=='A'){
      //判断当前点击元素的class是不是active
      if($(target).parent().attr("class")=="active"){

      }
      //遍历当前元素的父元素，看是否有class为active的元素
      var lis=$(target).parent().parent().children();
      for(var i=0;i<lis.length;i++){
       if($(lis[i]).attr("class")=="active"){
         $(lis[i]).removeClass("active");

       }
      }
      $(".container>div").css("display","none");
      //为当前元素的父元素追加class:active
      $(target).parent().addClass("active");
      $(elem).css("display","block");
    }
  })
</script>
</body>
</html>